<template>
	<view class="header-box">
		<view class="padding" :style="{'height':statusBarHeight}"></view>
		<view class="header">
			<view class="back" v-if="pageBack">
				<image src="../../static/ico/back.png"></image>
			</view>
			<view class="title" :class="[pageBack?'':'center']">
				{{pageTitle}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			pageTitle: String,
			pageBack: Boolean
		},
		data() {
			return {
				statusBarHeight: '',
			};
		},
		created() {
			const res = uni.getSystemInfoSync();
			this.statusBarHeight = res.statusBarHeight + 'px'
		}
	}
</script>

<style lang="less">
	.header-box {
		width: 100%;
		position: fixed;
		top: 0px;
		z-index: 9999;

		// box-shadow:0 2px 10px rgba(0,0,0,0.1);

		.padding {
			background: #FFFFFF;
		}

		.header {
			height: 45px;
			line-height: 45px;
			background: #FFFFFF;
			display: flex;
			align-items: center;

			.back {
				width: 47.5%;
				height: 45px;

				image {
					margin: 7px 0 0 18px;
					width: 35px;
					height: 35px;
				}
			}

			.title {
				width: 52.5%;
			}

			.center {
				width: 100%;
				line-height: 45px;
				text-align: center;
			}
		}
	}
</style>
